<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="../js/index.css" rel="stylesheet" />
	<style>
		 .el-icon-arrow-up:before {
			content: "△";
		}
		.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
			position: absolute;
			right: 20px;
			font-family: element-icons;
			content: "√";
			font-size: 12px;
			font-weight: 700;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		.el-icon-close:before {
			content: "×";
		}
	</style>
</head>
<body>
	<div id="app">
		<div>
			<label >请选择社保方案：</label>
			<!-- 
				v-model 绑定的值就是： v-bind:value="" 中的内容
				
				v-bind:label="" 是页面显示的内容
			 -->
			<el-select hide-required-asterisk filterable v-model='insuranceName'  placeholder="请选择" @change="getInsuranceName">
				<el-option v-for="item in insurancePlians" v-bind:key="item.id" v-bind:label="item.name" v-bind:value="item.id"></el-option>
			</el-select>
		</div>
		
		<div style="height: 20px;"></div><!-- 间距div -->
		
		<div id = "demo">
			<label>请选择社保城市：</label>
			<el-select filterable v-model="value11" multiple collapse-tags placeholder="请选择">
				<el-option v-for="item in options" v-bind:key="item.city_id" v-bind:label="item.city_name" v-bind:value="item.city_id"></el-option>
			</el-select>
		</div>
		
		<div style="height: 20px;"></div><!-- 间距div -->
		
		<div>
			<a href="javascript:;" @click="downTemplate">请下载社保模板</a>
		</div>
		
		
	</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script src="../js/index.js"></script>
<script type="text/javascript">
	const vm = new Vue({
		el:"#app",
		data:{
			options: [],
			value11: [],
			
			// 组装数据
			insurancePlians:[
				{id:"123456789", name:'自行申报'},
				{id:"987654321", name:'代理'},
				{id:"332245432", name:'派遣'}
			],
			insuranceName:''
		},
		methods:{
			getInsuranceName() {
				this.options = []; // 该数据从ajax请求得到
				this.value11 = []; // 该数据整理后通过ajax传递给 后台
				const city1 = {
					key: "123456789", 
					city_value:[
						{city_id:"123", city_name:"北京"},
						{city_id:"456", city_name:"上海"},
						{city_id:"789", city_name:"广州"},
						{city_id:"012", city_name:"深圳"}
					]
				};
				const city2 = {
					key: "987654321", 
					city_value:[
						{city_id:"qaz", city_name:"杭州"},
						{city_id:"wsx", city_name:"扬州"},
						{city_id:"edc", city_name:"苏州"},
						{city_id:"rfv", city_name:"贵州"}
					]
				};
				const city3 = {
					key: "332245432", 
					city_value:[]
				};
				
				if(this.insuranceName === city1.key) {
					this.options = city1.city_value;
				} else if(this.insuranceName === city2.key) {
					this.options = city2.city_value;
				} else if(this.insuranceName === city3.key) {
					this.options = city3.city_value;
				}
				
				console.log(JSON.stringify(this.value11));
			},
			
			downTemplate() {
				const insName = this.insuranceName;
				const citys = this.value11;
				console.log(insName + "----------" + citys);
			}
		}
	});
</script>
</body>
</html>
